<template>
  <div>
    <div>
      <input type="text" v-model="form.id">
      <input type="text" v-model="form.name">
      <button @click="handleAdd">提交</button>
    </div>
    <ul>
      <li v-for="item in obj.arr" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    // !#1 渲染数据列表
    const obj = reactive({
      arr: [
        {
          id: 0,
          name: 'ifer',
        },
        {
          id: 1,
          name: 'elser',
        },
        {
          id: 2,
          name: 'xxx',
        },
      ],
    })
    // !#2 收集数据（注意和模板中的 input 进行 v-model 绑定），使用 reactive 包裹一下，可以实时收集，是响应式的
    const form = reactive({
      id: '',
      name: ''
    })
    // !#3 添加到 obj.arr
    const handleAdd = () => {
      // obj.arr.push(form)
      // 为了防止输入的时候影响到添加到数组里面的数据，要拷贝一下
      obj.arr.push({
        ...form
      })
      form.id = ''
      form.name = ''
    }
    return {obj, form, handleAdd}
  }
}
</script>